body {
	background: #F5DEB3;
}


/*顶部菜单部分*/

.demo-ul {
	list-style: none;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.demo-ul li {
	list-style: none;
	position: relative;
	width: 50%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	float: left;
}

.demo-ul li:nth-child(2n-1) {
	background: rgba(0, 220, 220, .2);
}

.demo-ul li:nth-child(2n) {
	background: rgba(220, 0, 220, .2);
}


/*分页部分demo*/

.ij-page-ul .ij-page-li:nth-child(2n) {
	background: #CCCCCC;
}


/*立方体*/

.l-perspective {
	perspective: 1000px;
}

@keyframes lRun {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}
@-webkit-keyframes lRun {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}
.l-box {
	transform-style: preserve-3d;
	width: 200px;
	height: 200px;
	margin: 100px auto;
	
	animation: lRun 3s ease;
	-webkit-animation: lRun 3s ease;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}

div[class^="mydiv"] {
	height: 200px;
	width: 200px;
	opacity: 0.5;
	position: absolute;
	transition: transform 1s ease 0s;
	overflow: hidden;
}
div[class^="mydiv"] img{
	width: 100%;
}
.mydiv1 {
	background: #0000FF;
	transform: translateZ(100px);
}

.mydiv2 {
	background: #008000;
	transform: translateZ(-100px);
}

.mydiv3 {
	background: #808080;
	transform: rotateY(90deg) translateZ(-100px);
}

.mydiv4 {
	background: #8B4513;
	transform: rotateY(90deg) translateZ(100px);
}

.mydiv5 {
	background: #FF0000;
	transform: rotateX(90deg) translateZ(100px);
}

.mydiv6 {
	background: #FFFF00;
	transform: rotateX(90deg) translateZ(-100px);
}

.l-box:hover .mydiv1 {
	background: #0000FF;
	transform: translateZ(200px);
}

.l-box:hover .mydiv2 {
	background: #008000;
	transform: translateZ(-200px);
}

.l-box:hover .mydiv3 {
	background: #808080;
	transform: rotateY(90deg) translateZ(-200px);
}

.l-box:hover .mydiv4 {
	background: #8B4513;
	transform: rotateY(90deg) translateZ(200px);
}

.l-box:hover .mydiv5 {
	background: #FF0000;
	transform: rotateX(90deg) translateZ(200px);
}

.l-box:hover .mydiv6 {
	background: #FFFF00;
	transform: rotateX(90deg) translateZ(-200px);
}